<template>
	<view class="page">
	<plublic-navbar :is-back="true" :title="title" :background="background" :titleColor="color"></plublic-navbar>
	
	<view class="content" :style="'margin-top:'+top/2+'px'">

		<view class="main  u-col-bottom">
			<view class="baseInfo">
				<view class="u-flex u-row-center">
					<view class="useinfo">
						<view class="photo u-flex u-row-center">
							<image class="phono-avatar" :src="userInfos.avatar || imgUrl+'service/old.png'" ></image>
						</view>
						<view class=" u-flex u-row-center">
							<view class="nickname">{{userInfos.nickname}}</view>
	
						</view>
						
					</view>
				
				</view>
	
			</view>

		
		</view>

	
		<view class="menus">
		     
				 <view class="u-flex u-row-between title">
				 	<view class="u-col-center name">
				 		我的订单
				 	</view>
				 	<u-icon name="arrow-right" labelPos="left" size="14" labelSize="13" label="全部订单" color="#84929A" @click="goPage('/pages/order/orderlist')"></u-icon>
				 </view>
		        <u-grid :col="4" :border="false" hover-class="girdOn" align="left">
		          <u-grid-item :custom-style="{padding: '20rpx 0 10rpx'}">
		            <navigator url="/pages/order/orderlist?status=0" hover-class="" class="gird-item">
		              <u-image width="88rpx" height="88rpx" :src="imgUrl+ 'common/order01.png'"></u-image>
		              <view class="grid-text">待付款</view>
		            </navigator>
		          </u-grid-item>
		          <u-grid-item :custom-style="{padding: '20rpx 0 10rpx'}">
		            <navigator url="/pages/order/orderlist?status=201" hover-class="" class="gird-item">
		              <u-image width="88rpx" height="88rpx" :src="imgUrl+'common/order02.png'"></u-image>
		              <view class="grid-text">待发货</view>
		            </navigator>
		          </u-grid-item>
		          <u-grid-item :custom-style="{padding: '20rpx 0 10rpx'}">
		            <navigator url="/pages/order/orderlist?status=300" hover-class="" class="gird-item">
		              <u-image width="88rpx" height="88rpx" :src="imgUrl+'common/order03.png'"></u-image>
		              <view class="grid-text">待收货</view>
		            </navigator>
		          </u-grid-item>
		          <u-grid-item :custom-style="{padding: '20rpx 0 10rpx'}">
		            <navigator url="/pages/order/orderlist?status=400" hover-class="" class="gird-item">
		              <u-image width="88rpx" height="88rpx" :src="imgUrl+'common/order04.png'"></u-image>
		              <view class="grid-text">售后</view>
		            </navigator>
		          </u-grid-item>
		      
		   
		        </u-grid>
		      
		    </view>
	</view>
	<!-- <tab-bar :currindex="currindex"></tab-bar> -->
	</view>
</template>

<script>
	import {loginUrl} from '../../common/mixin.js';
	import { getMe,logout } from '../../common/api.js';
	export default {
		mixins: [loginUrl],
		data() {
			return {
				 // imgURL: this.$config.imgURl,
				 baseUrl:uni.$u.http.config.baseURL,
				 imgUrl:uni.$u.http.config.imgURl,
				background:'rgba(255,255,255,0)',
				title:'',
				// userInfo:{
				// 	avatar:'',
				// 	nickname:'小明',
				// 	mobile:'13212525452'
					
				// },
				flag: false,
				timer:'',
				top:0,
				currindex:3,
				userInfos:uni.getStorageSync('userInfo'),
				show: false,
	
				count: 1,
				type: 'error',
				isDot: false,
				offset: [-8, -8],
				size: 'default',
				isCenter: false
			}
		},
		onLoad() {
			
			// console.log('token',this.vuex_token);
			let that =this
			uni.getStorage({
				key: 'top',
				success: function (res) {
					that.top = res.data;
					console.log(res.data);
				}
			});

		
		},

		onShow(){
			let that =this
			try {
				const value = uni.getStorageSync('userInfo');
				if (value) {
					that.userInfos = value
					console.log(value)
				}
			} catch (e) {
				// error
			}
		
	
		},
		computed: {
			// ...mapGetters(["userInfo"]),
			
		},
		// 滚动监听事件
		    onPageScroll(object)
		    {	
				//this.show = object.scrollTop >= this.scrollTop;
				let scrollTop = object.scrollTop;
				if(scrollTop > 40){
					this.background="#ffffff";
				}else{
					this.background="#ffffff";
				}
				
		        console.log('开始滚动',object.scrollTop)
		        this.isShowLog = 2
		        // 只要滚动就清除状态
		        clearTimeout(this.timer)
		        // 告知标识 -> 开始滚动
		        this.flag = false
		        // 检测是否停留了 N 秒
		        // 如果停留则表示滚动结束
		        // N: 500(定时器时间 毫秒) -> 0.5秒算停止滚动
		        // 滚动后多长时间算停止滚动
		        this.timer = setTimeout(() => {
		            // console.log('结束滚动')
		            this.isShowLog = 0
		            // 告知标识 -> 结束滚动
		            this.flag = true; 
		        }, 500);
		    }, 
		methods: {
			goPage(e){
				if(this.isLogin(e)){
					this.globals.linkJump({
					  url:e,
					  callback: () => {
					    uni.setStorageSync('pagelist',e)
					  }
					});
					// uni.navigateTo({
					// 	url: e
					// })
				}
			
			},
			// ...mapActions(['getUser']),
			async getMe(){
				await getMe({custom: {auth: true}, }).then(res=>{
					console.log('个人信息',res,)
					
					let userInfo={
						token:this.userInfos.token,
						user:res,
					};
		
					this.userInfos = userInfo
					uni.setStorage({
						key: 'userInfo',
						data: userInfo,
						success: function () {
							// console.log('success');
						}
					});
				}).catch(err=>{
					console.log('失败',err)
					this.phLogin()
				})
			},
	
		
			// goPage(u){
			// 	if(!this.userInfos.token){
			// 		uni.$u.toast( '请先登录再进行操作！' );
			// 		uni.$u.sleep(500).then(() => {
			// 			this.phLogin()
			// 		})
					
			// 	}else{
			// 		uni.navigateTo({
			// 			url:u
			// 		})
			// 	}
				
			// },
			toPath(url){
				uni.navigateTo({
					url
				})
			},
		
			open() {
				this.show = true;
			},

	
		
		}
	}
</script>
<style lang="scss" scoped>
	page{
		background-color: #F5F5F5;
		width: 100%;
		height: 100%;
	}
	.page{
	 
	position: relative;
		background-color: #F5F5F5;
		background-repeat: no-repeat;
		background-position: top center;
		background-size: 100% auto;
		padding: 0 26rpx;
		padding-bottom: 50rpx;
		box-sizing: border-box;
		background: linear-gradient( 180deg, #25D59F -40%, rgba(245,245,245,1) 30%);
		height: 100vh;
	}

.page::before{
	position: absolute;
	top: 0;
	left: -50%;
	height: 496rpx;
	width:200%;
	content: "";
	background: #25D59F;
	border-radius: 0 0 60% 60%;
}
.scroll-view{
	height: 700rpx;
	padding: 30rpx;
}
.openInfos{
	color: #FFA400;

}
// .title{
// 	padding: 0;
// 	.title__name{
// 		font-size: 40rpx;
// 		color: #002A3A;
// 		font-weight: bold;
// 	}
// 	.title__more{
// 		font-size: 24rpx;
// 		color:#FFA400
// 	}
// }
.menus{
	width: 710rpx;
	position: relative;
	z-index: 9;
	background: #FFFFFF;
	border-radius: 20rpx;
	margin: 0 auto;
	margin-top: 30rpx;
	padding: 24rpx 0rpx;
	.title{

		height: 42rpx;
		text-align: left;
		font-style: normal;
		position: relative;
		padding-left: 30rpx;
		margin-bottom: 20rpx;
		
		padding-right: 20rpx;
		.name{
			font-weight: 600;
			font-size: 28rpx;
			color: #333333;
		}
		
	}
	
	.grid-text{
		text-align: center;
		margin-top: 20rpx;
	}
}
.main{
	// height: 90%;
	position: relative;
	margin-bottom: 30rpx;
	.baseInfo{
	width: 100%;
	// margin-top: 80rpx;
	// background-color: #ffffff;
	// border-radius: 24rpx;
	// padding: 34rpx  22rpx;	
	.iconGroup{
	position: relative;
	top:-70rpx;	
	.shezhi{
		margin-right: 20rpx;
	}
		.badge {
			background-color: blue;
			color: white;
		}
	}
	.useinfo{
		position: relative;
		top:0rpx;
		text-align: center;
		// margin-bottom: -40rpx;
		.nickname{
			margin-top: 20rpx;
			font-size: 38rpx;
			font-weight: 500;
			color: #ffffff;

		}
		.photo{
		
			.phono-avatar{
				width: 150rpx;
				height: 150rpx;
				border-radius: 50%!important;
				border: 4rpx solid #25D59F;
			}
		
		}
		.phone{

			margin-top: 20rpx;
			background: #312215;
			border-radius: 10rpx;
			font-weight: 600;
			font-size: 24rpx;
			color: #F2C194;
			line-height: 1;
			padding: 10rpx;
			
			
			
		}
	}

	}


}
</style>
